<template>
  <div class="w-full h-full flex justify-center items-center">
    <div v-if="!userStore.isLogin" class="m-auto">请先登录哟~~</div>
    <div
      ref="scroll"
      @scroll.passive="handleScroll"
      v-else
      class="grid-container px-1 sm:px-0"
    >
      <div
        class="grid-item rounded-xl overflow-hidden"
        v-for="video in list"
        :key="video"
      >
        <VideoCard :viewFlag="false" :videoInfo="video"></VideoCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores/user";
import { getFavoritePageById } from "@/http/api/favorite";
import _debounce from "lodash/debounce";
import { ref } from "vue";

const userStore = useUserStore();
const list = ref([]);

let page = 1;
let scrollFlag = true;

getFavoritePageById(userStore.userInfo.userId, page).then((res) => {
  console.log(res);
  if (res.code === 200 && res.data) {
    list.value = list.value.concat(res.data);
  }
});

let scroll = ref(null);
const handleScroll = _debounce(() => {
  let scrollBottom =
    scroll.value.scrollHeight -
    scroll.value.scrollTop -
    scroll.value.clientHeight;
  if (scrollBottom < 100) {
    // 执行加载动画

    //获取下一页视频
    if (!scrollFlag) {
      ElMessage({
        message: "已到尾部啦！^ ^",
        type: "warning",
      });
      return;
    }
    getFavoritePageById(userStore.userInfo.userId, page).then((res) => {
      if (res.code === 200) {
        if (!res.data) {
          scrollFlag = false;
          ElMessage({
            message: res.message,
            type: "warning",
          });
          return;
        }
        list.value = list.value.concat(res.data);
      }
    });

    //取消加载动画
  }
}, 500);
</script>

<style lang="scss" scoped>
.grid-container {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, clamp(10rem, 45%, 12rem));
  justify-content: space-around;
  column-gap: 1rem;
  align-items: start;
  margin: 0 auto;
  .grid-item {
    min-width: 10rem;
    max-width: 12rem;
    margin: 0 1rem 1rem 0;
    width: 100%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
}
</style>